<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/css/home3.css"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/curve.js"></script>
    <title>home3</title>
<script type="text/javascript">
    $(function() {
        $('.curve').cornerz({radius: 4, background: "white"})
        $('#r2').cornerz({radius: 4, background: "white", corners: "bl br"})
        $('#side').cornerz({radius: 6, background: "white"})
	$('.rd').cornerz({radius: 4, background: "white"})
    })
    </script>
  </head>
  <body>
    <div id="content">
      <div id="top">
        <select>
          <option value="1">English</option>
        </select>
      </div>
      <div id="main">
	<div id="side">
	   <div id="p_img">
	     <img src="/images/onur.jpg" width="120" height="108" border="0"/>
	   </div>
	   <div class="menubox">
	    <ul>
	      <li>Home</li>
	      <li>Profile</li>
	      <li>ABC</li>
	    </ul>
	   </div>
	   <div class="menubox">
	    <h4>Applications</h4>
	    <ul>
	      <li>Home</li>
	      <li>Profile</li>
	      <li>ABC</li>
	    </ul>
	   </div>
        </div>
	<div id="right">
	  <div id="r1">
	    <div class="rd">
	        <h3>What are you doing?</h3>  
                <table cellpadding="0" cellspacing="0" 
		       border="0" summary="" width="100%"
	               style="width: 100%; margin: 0; padding: 0">
		  <tr>
		     <td align="left">
			<select id="date_select">
                            <option value="0">2 Days ago</option>
                            <option value="1">Yesterday</option>
                            <option value="2">Today</option>
                            <option value="3" selected="selected">Now</option>
                            <option value="4">Tomorrow</option>
                            <option value="5">2 Days later</option>
                            <option value="6">Select any date</option>
                        </select>
			<span id="date_part">
                              <a href="javascript: void(0);"
                                 onclick="alert(1);"
                                 style="margin: 0; padding: 0;">
				<img src="images/calendar.png"
                                 height="16" width="16"
                                 border="0" style="vertical-align:middle;">
                               	</img>
			      </a>                              
                              <select id="date_month" name="date_month">
                                  <option value="1"
                                  selected="selected">
                                  January
                                  </option>
			      </select>
			      <select class="f_fnselect" 
		                      id="date_day" name="date_day">
                                 <option value="1" selected="selected">1</option>
                              </select>
                        </span>
			<span id="time_part">
                          <span id="date_at"
                          	class="f_nslabel"
                                style="margin-left: 5px;">
                             	at
                          </span>
                          <select id="time_hour"
				  class="f_fnselect"
                                  name="time_hour">
				  <option value="0">00
                                  </option>
                          </select>
                          <span class="f_nslabel">:</span>
                          <select id="time_minute"
				  class="f_fnselect"
                          	  name="time_minute">
                                 <option value="0">00</option>
                                 <option value="1">15</option>
				 <option value="2">30</option>
                                 <option value="3">45</option>
                          </select>
                        </span>
		     </td>	
		     <td align="right">
			<a class="applink" href="javascript: void(0);">
                         <img src="images/photo-icon.png"
                         height="16" width="15" border="0"
                         style="vertical-align:middle;"></img>
                        </a>
                        <a id="mapsApp" class="applink"
		           href="javascript: void(0);">
                           <img src="images/map-icon.png"
			   height="16" width="16" border="0"
                           style="vertical-align:middle;"></img>
                         </a>
			<a href="javascript: void(0);"
                           onclick="alert(3);"
                           style="margin: 0; padding: 0;">
                           <img src="images/video-icon.png"
                           height="16" width="17" border="0"
                           style="vertical-align:middle;"></img>
                        </a>
		     </td>	    
		  <tr>	
		  <tr>
                      <td colspan="2">
                        <textarea rows="2" class="f_ftextarea"
                                  name="message" id="message_box"
				  style="width: 500px; border: Solid 1px;">
                        </textarea>
                      </td>
                  </tr>	
		  <tr>                                                                    
                      <td colspan="2" align="right">
                       <button id="submit_button" name="submit_button"
                                                 onclick="alert(1);">Post</button>
                      </td>
                  </tr>
		</table>
            </div>
	    <div class="rd">
		<h3>Recent Posts</h3>
		 <table width="100%"
                        cellpadding="5" cellspacing="0"
                        border="0" class="rp"
                        id="eventBody">
                 <c:forEach var="evf" items="${eventsOfFriends}">    
		   <tr>
                    <td width="50px">
		     <img src="images/man.png"/>
                    </td>
                    <td>
                     <h3>
                       <c:out value="${evf.ownerFullname}"> 		
		       <em>
                   	 <fmt:formatDate type="time" timeStyle="short" value="${evf.date}" />
 		       </em>
		     </h3>
		     <span class="message">
                       <c:out value="${evf.message}"/>
                      <em></em>
                     </span>
                    </td>
		   </tr>
                 </c:forEach>                                                        
                 </table>
            </div>
	  </div>
	  <div id="r2">
	     <input type="text"/>
	  </div>
        </div>
      </div>   
      <div id="bottom">
	ABC
      </div>   
    </div>
  </body>
</html>
